<template>
  <div class="main-panel">
    <div class="content-wrapper">
      <!-- 左边栏 顶部 用户信息 -->
      <div class="row">
        <!-- 顶部 欢迎用户登录 以及上次登录时间 -->
        <div class="col-sm-6">
          <h3 class="mb-0 font-weight-bold">Dear {{user_name}}!</h3>
          <p>您上次登录 : 21小时前 ip:河南</p>
        </div>
      </div>
      <!-- 第一排 地图 -->
      <div class="row">
        <!-- col-xl-6 d-flex grid-margin stretch-card -->
        <div class="left">
          <div class="card">
            <!-- 这里是地图图表组件 传入一个插槽-->
            <Charts>
              <template slot="mycharts">
                <mapChart></mapChart>
              </template>
            </Charts>
          </div>
        </div>
        <div class="mediumRight">
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="12">
              <el-card shadow="always" class="rowCard">
                <div class="thisSvg">
                  <svg t="1678074899108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2786" width="48" height="48"><path d="M969.386667 909.653333q-88.533333-67.2-177.706667-133.973333C725.333333 725.333333 657.066667 676.266667 589.866667 626.56a126.506667 126.506667 0 0 1-50.773334-74.453333 543.786667 543.786667 0 0 1-8.32-123.306667c21.333333-7.04 40.106667-13.013333 58.88-21.333333a289.066667 289.066667 0 0 0 134.186667-101.333334 410.24 410.24 0 0 0 54.4-122.666666c9.173333-30.506667 16.64-61.653333 24.533333-92.373334a33.28 33.28 0 0 0-18.56-40.32A95.786667 95.786667 0 0 0 753.706667 42.666667a39.893333 39.893333 0 0 0-48.426667 40.533333c-3.413333 26.453333-6.826667 53.12-12.373333 79.146667a221.44 221.44 0 0 1-59.093334 111.36 221.866667 221.866667 0 0 1-95.36 55.893333c-5.333333 1.706667-7.253333 0-8.533333-4.48a55.04 55.04 0 0 1 11.093333-58.666667 193.28 193.28 0 0 0 18.56-21.333333 65.92 65.92 0 0 0 3.413334-62.293333 62.08 62.08 0 0 0-54.613334-42.666667 69.12 69.12 0 0 0-68.906666 38.826667 192 192 0 0 0-4.906667 73.813333v62.72c0 9.173333-5.333333 11.52-14.506667 11.52H96.213333a69.12 69.12 0 0 0-26.453333 4.693333 46.293333 46.293333 0 0 0 20.266667 88.533334h317.226666a22.826667 22.826667 0 0 1 25.813334 24.533333c1.706667 31.573333 3.413333 64 5.333333 94.72a192 192 0 0 0 18.133333 73.6 285.866667 285.866667 0 0 0 88.106667 101.76c55.04 42.666667 111.573333 81.493333 167.893333 121.6 51.413333 36.48 103.466667 71.893333 154.88 108.16a142.72 142.72 0 0 0 57.813334 30.506667 47.573333 47.573333 0 0 0 53.12-27.733334 32.213333 32.213333 0 0 0-8.96-37.76zM387.84 585.813333a288.853333 288.853333 0 0 0-151.466667 14.72 197.333333 197.333333 0 0 0-123.733333 130.773334 384 384 0 0 0-15.146667 134.826666v59.306667A119.893333 119.893333 0 0 0 106.666667 962.133333c7.253333 17.92 24.106667 20.266667 40.746666 18.986667 23.893333-1.92 39.253333-4.266667 43.733334-37.12a104.106667 104.106667 0 0 0 0.853333-16.213333c0-42.666667-3.626667-83.2-2.346667-124.8a117.333333 117.333333 0 0 1 49.28-95.36 158.293333 158.293333 0 0 1 81.066667-34.346667c24.96-1.706667 49.92-1.706667 74.666667-1.493333a37.76 37.76 0 0 0 35.626666-26.453334 35.413333 35.413333 0 0 0-6.826666-40.533333 62.08 62.08 0 0 0-35.626667-18.986667z" p-id="2787" fill="#f2125e"></path></svg>
                </div>
                <h2>河南——武术</h2>
                <span>文有太极安天下，武有八极定乾坤。</span>
              </el-card>
            </el-col>
            <el-col :span="12" type="flex" class="row-bg" justify="center">
              <el-card shadow="always" class="rowCard">
                <div class="thisSvg">
                  <svg t="1678075426851" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5543" width="48" height="48"><path d="M857.327487 511.438266c0-20.155603-12.717591-37.356231-30.554009-44.021181 9.148502-8.570511 14.886861-20.769718 14.886861-34.298301 0-25.937311-21.028007-46.97435-46.986993-46.97435-1.591279 0-3.16269 0.075861-4.71062 0.22939a46.842496 46.842496 0 0 0 3.97007-18.92918c0-25.962599-21.028007-46.986993-46.97435-46.986993-1.811638 0-3.576315 0.102955-5.333766 0.292607a47.098979 47.098979 0 0 0 2.541351-15.267973c0-25.940924-21.028007-46.968931-46.981574-46.968931-1.499162 0-2.992906 0.070443-4.466781 0.205909a46.647424 46.647424 0 0 0 2.835764-16.069934c0-25.937311-21.037038-46.968931-46.974349-46.968931-1.233648 0-2.46549 0.048768-3.664819 0.140885a46.790115 46.790115 0 0 0 2.792415-15.992267c0-25.946343-21.028007-46.981574-46.97435-46.981575a47.16039 47.16039 0 0 0-5.639017 0.335957c0.850729-3.534771 1.298672-7.224878 1.298672-11.017938 0-23.199083-16.801453-42.466026-38.904161-46.287987l0.11921-3.298156c0-25.946343-21.037038-46.977962-46.974349-46.977962-25.944536 0-46.97435 21.031619-46.97435 46.977962 0 1.291447 0.050574 2.579281 0.144498 3.843635-20.760687 4.85873-36.227344 23.493497-36.227344 45.742508 0 3.793061 0.451555 7.484973 1.293253 11.017938a47.355462 47.355462 0 0 0-5.633598-0.335957c-25.935505 0-46.97435 21.035232-46.97435 46.981575 0 5.615536 0.991614 10.999877 2.797834 15.992267a48.123105 48.123105 0 0 0-3.655788-0.140885c-25.946343 0-46.97435 21.031619-46.97435 46.968931 0 5.649854 0.988002 11.0649 2.806865 16.069934a48.392232 48.392232 0 0 0-4.452331-0.205909c-25.935505 0-46.968931 21.028007-46.96893 46.968931 0 5.350022 0.892272 10.481492 2.54135 15.267973a49.649361 49.649361 0 0 0-5.335572-0.292607c-25.944536 0-46.97435 21.024395-46.97435 46.986993 0 6.728167 1.421495 13.140247 3.975489 18.92918a48.061694 48.061694 0 0 0-4.728682-0.22939c-25.935505 0-46.970737 21.035232-46.970737 46.97435 0 13.528584 5.725716 25.72779 14.886861 34.298301-17.843642 6.66495-30.537752 23.865578-30.537753 44.021181 0 11.65734 4.269903 22.297779 11.297903 30.510659-0.552703 11.774745 2.624437 28.285397 14.718882 50.763798 30.521496 56.704454 53.769347 162.834297 42.148131 244.247833-4.28074 29.977824-14.928404 73.596218-14.928403 81.456885 0 24.582647 19.931632 44.503441 44.507053 44.503442 22.290554 0 40.748311-16.375186 44.003119-37.751793 0.512966-0.037931 54.919909 72.102475 203.801161 73.231362 148.879445-1.128887 203.286388-73.269293 203.799354-73.231362 3.249389 21.376607 21.71437 37.751793 44.006731 37.751793 24.57181 0 44.499829-19.918988 44.499829-44.503442 0-7.860667-10.645858-51.479061-14.921179-81.456885-11.626635-81.41173 11.628441-187.543379 42.142712-244.247833 12.253393-22.76559 15.361897-39.426158 14.697208-51.227996a46.788309 46.788309 0 0 0 10.884279-30.046461z m-83.18905 4.967103c-0.010837 13.768811-0.451555 23.088903-0.451555 23.088904s-10.21959 73.608862-18.394539 106.315883c-8.180368 32.708828-16.163858 107.549532-20.16644 141.054903-14.876023 124.504514-122.154622 191.253354-227.206153 197.898436-105.026243-6.646888-210.038036-73.395728-224.919478-197.898436-4.002582-33.505371-11.986072-108.344268-20.166441-141.054903-8.176756-32.707022-18.394539-106.315884-18.394539-106.315883s0.054187-3.357762 0.39195-8.911887c-0.3486 0-23.181021-133.181592 88.62577-119.759575 164.091426 19.702242 219.668799 19.702242 348.846002 0 90.090614-13.73088 93.733759 72.270453 91.835423 105.582558z m-85.179504 62.254966l-108.192546 0.261902c45.469769 29.278817 92.792719 31.760563 158.439765-22.487432-19.555938 11.80545-36.411578 18.938211-50.247219 22.22553z m-122.960196 188.10692c9.619925-14.281777 4.461362-28.433507-7.4055-42.204124-32.32591-37.437511-73.437271-209.870058 89.465663-227.961152 66.441783-7.378407 110.647198 43.974219 110.647198 43.974219s-21.465112-65.423075-108.344268-65.423075c-86.8918 0-157.169993 80.147376-123.659204 214.210403 9.663274 38.615166 32.300623 81.308775-18.50833 83.555713 0-0.001806 44.487185 13.602639 57.804441-6.151984zM492.861299 485.379938c0-9.032904 7.326026-16.362542 16.351704-16.362543 9.036516 0 16.355317 7.329639 16.355318 16.362543a16.346286 16.346286 0 0 1-16.355318 16.348092c-9.029291-0.001806-16.351705-7.313383-16.351704-16.348092zM451.885404 766.767255c-9.619925-14.281777-4.472199-28.433507 7.409112-42.204124 32.329522-37.437511 70.046997-211.448694-89.483725-227.961152-66.48152-6.883502-110.630942 43.974219-110.630942 43.974219s21.4615-65.423075 108.351493-65.423075c86.886381 0 157.162768 80.147376 123.650172 214.210403-9.663274 38.615166-32.291592 81.308775 18.515556 83.555713 0.001806-0.001806-44.488992 13.602639-57.811666-6.151984zM328.507971 578.660335l108.196158 0.261902c-45.469769 29.278817-92.794525 31.760563-158.441571-22.487432 19.548713 11.80545 36.407966 18.938211 50.245413 22.22553z m99.426963 278.202953c53.738641 55.324502 107.253312 55.324502 160.553042 0-88.779299 12.047484-160.553042 0-160.553042 0z m154.957374-9.007616l6.238682-1.11805s-9.695786-10.038968-20.271201-17.695532c-12.018584-8.725846-14.554516-10.230427-28.449763-11.070319-19.378929-1.172236-32.217537 14.946466-32.217537 14.946466s-15.923631-15.526263-31.773206-14.946466c-11.722364 0.435299-20.09961 3.97007-28.892287 11.070319-8.830607 7.132761-18.165149 15.667148-20.460854 17.784037h-0.442524l0.375694 0.054186c-0.31067 0.28177-0.480454 0.446136-0.480454 0.446136l3.103085 0.534641c14.941047 2.082571 79.325546 10.181659 153.270365-0.005418z m158.309717 74.094735c0-11.713333 9.500714-21.214048 21.224885-21.214048 11.711527 0 21.212241 9.500714 21.212241 21.214048 0 11.724171-9.500714 21.223079-21.212241 21.223078-11.725977 0-21.224885-9.498908-21.224885-21.223078z m-497.508701 0c0-11.713333 9.504327-21.214048 21.223078-21.214048s21.221272 9.500714 21.221273 21.214048c0 11.724171-9.502521 21.223079-21.221273 21.223078s-21.223079-9.498908-21.223078-21.223078z" fill="#f2125e" p-id="5544"></path></svg>                
                </div>
                <h2>四川——佛系</h2>
                <span>菩提本无树，明镜亦非台。</span>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card shadow="always" class="rowCard">
                <div class="thisSvg">
                  <svg t="1678075478277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6876" width="48" height="48"><path d="M804.408889 417.564444c23.324444-75.093333 15.36-137.102222-22.755556-175.217777-38.115556-38.115556-100.124444-46.08-175.217777-22.755556C576.853333 209.92 544.995556 204.8 512 204.8c-169.528889 0-307.2 137.671111-307.2 307.2 0 32.995556 5.12 64.853333 14.791111 94.435556-23.324444 75.093333-15.36 137.102222 22.755556 175.217777 23.893333 23.893333 56.888889 35.84 96.711111 35.84 23.893333 0 50.062222-4.551111 78.506666-13.084444 29.582222 9.671111 61.44 14.791111 94.435556 14.791111 169.528889 0 307.2-137.671111 307.2-307.2 0-32.995556-5.12-64.853333-14.791111-94.435556z m-55.182222-142.791111c16.497778 16.497778 23.893333 41.528889 22.186666 73.386667-24.462222-38.115556-56.888889-71.111111-95.004444-95.004444 31.288889-2.275556 56.888889 5.12 72.817778 21.617777zM512 250.311111c111.502222 0 206.506667 69.973333 244.053333 167.822222-23.893333 67.128889-71.68 138.808889-135.395555 202.524445s-135.395556 112.071111-202.524445 135.395555C320.284444 718.506667 250.311111 623.502222 250.311111 512c0-144.497778 117.191111-261.688889 261.688889-261.688889z m-237.226667 498.915556c-16.497778-16.497778-23.893333-41.528889-22.186666-73.386667 24.462222 38.115556 56.888889 71.111111 95.004444 95.004444-31.288889 2.275556-56.888889-5.12-72.817778-21.617777zM512 773.688889c-6.257778 0-13.084444-0.568889-19.342222-0.568889 54.613333-28.444444 109.795556-69.973333 159.857778-120.035556s91.591111-105.244444 120.035555-159.857777c0.568889 6.257778 0.568889 13.084444 0.568889 19.342222 0.568889 143.928889-116.622222 261.12-261.12 261.12z" p-id="6877" fill="#f2125e"></path><path d="M358.4 512c0-84.764444 68.835556-153.6 153.6-153.6 12.515556 0 22.755556-10.24 22.755556-22.755556s-10.24-22.755556-22.755556-22.755555c-109.795556 0-199.111111 89.315556-199.111111 199.111111 0 12.515556 10.24 22.755556 22.755555 22.755556s22.755556-10.24 22.755556-22.755556z" p-id="6878" fill="#f2125e"></path></svg>
                </div>
                <h2>海南——太空</h2>
                <span>海上生明月，天涯共此时。</span>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card shadow="always" class="rowCard">
                <div class="thisSvg">
                  <svg t="1678075526606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9226" width="48" height="48"><path d="M953.651 320.768c0-99.277-80.486-179.763-179.763-179.763-71.424 0-133.069 41.625-162.1 101.939a359.388 359.388 0 0 0-200.447-0.768c-29.184-59.853-90.624-101.12-161.69-101.12-99.277 0-179.763 80.486-179.763 179.763 0 69.479 39.424 129.69 97.075 159.59a360.038 360.038 0 0 0-16.333 107.47c0 198.604 160.973 359.577 359.578 359.577s359.578-160.973 359.578-359.578c0-36.915-5.581-72.499-15.924-106.035 59.136-29.491 99.79-90.521 99.79-161.075zM708.403 672.973c-22.118 73.113-102.81 124.211-196.3 124.211-95.693 0-176.845-52.582-197.377-127.898-6.963-25.497 8.09-51.814 33.588-58.726 25.497-6.963 51.814 8.09 58.726 33.587 7.578 27.802 46.95 57.344 105.011 57.344 56.986 0 96.461-28.928 104.704-56.166 7.629-25.293 34.355-39.629 59.648-31.949 25.344 7.578 39.629 34.304 32 59.597z" fill="#f2125e" p-id="9227"></path><path d="M891.802 275.046c0-32.614-2.458-64.614-7.22-95.897a178.816 178.816 0 0 0-110.694-38.195c-71.424 0-133.069 41.625-162.1 101.939a359.388 359.388 0 0 0-200.447-0.768c-29.184-59.853-90.624-101.12-161.69-101.12-99.277 0-179.763 80.486-179.763 179.763 0 69.478 39.424 129.69 97.075 159.59a360.038 360.038 0 0 0-16.333 107.47c0 136.447 76.032 255.129 188.007 316.057 240.077-30.515 438.17-195.277 516.761-416.666l-1.536-5.427c1.434-0.717 2.868-1.536 4.301-2.304 21.76-64.154 33.639-132.915 33.639-204.442zM708.403 672.973c-22.118 73.113-102.81 124.211-196.3 124.211-95.693 0-176.845-52.582-197.377-127.898-6.963-25.497 8.09-51.814 33.588-58.726 25.497-6.963 51.814 8.09 58.726 33.587 7.578 27.802 46.95 57.344 105.011 57.344 56.986 0 96.461-28.928 104.704-56.166 7.629-25.293 34.355-39.629 59.648-31.949 25.344 7.578 39.629 34.304 32 59.597z" fill="#f2125e" p-id="9228"></path><path d="M611.789 242.893a359.388 359.388 0 0 0-200.448-0.768c-29.184-59.853-90.624-101.12-161.69-101.12-99.277 0-179.763 80.486-179.763 179.763 0 69.478 39.424 129.69 97.075 159.59a360.038 360.038 0 0 0-16.333 107.47c0 31.538 4.096 62.105 11.725 91.289 53.607-6.554 105.114-19.815 153.754-38.861 5.171-14.029 16.793-25.446 32.307-29.645 10.138-2.765 20.378-1.997 29.491 1.434C551.322 521.37 677.53 352.768 710.144 152.678a179.881 179.881 0 0 0-98.355 90.215z" fill="#f2125e" p-id="9229"></path><path d="M408.115 236.032c-30.31-56.525-89.856-95.027-158.464-95.027-99.277 0-179.763 80.486-179.763 179.763 0 42.24 14.643 80.998 39.014 111.667 117.914-35.737 221.338-104.857 299.213-196.403z" fill="#f2125e" p-id="9230"></path></svg>
                </div>
                <h2>山西——追漫</h2>
                <span>鹳雀楼西百尺樯，汀洲云树共茫茫。</span>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card shadow="always" class="rowCard">
                <div class="thisSvg">
                  <svg t="1678075578579" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11647" width="48" height="48"><path d="M732.37333334 694.50666667c-55.68 59.94666667-137.92 94.4-225.70666667 94.4-82.56 0-161.6-31.14666667-216.85333333-85.33333334-7.78666667-7.57333333-20.26666667-7.57333333-27.84 0.32-7.57333333 7.78666667-7.46666667 20.26666667 0.32 27.84 62.50666667 61.33333333 151.68 96.64 244.48 96.64 98.66666667 0 191.46666667-39.04 254.61333333-106.98666666 7.36-8 6.93333333-20.37333333-1.06666667-27.84-8.10666667-7.46666667-20.48-7.04-27.94666666 0.96zM195.41333334 551.57333333c10.88 0 19.73333333-8.85333333 19.73333333-19.73333333 0-30.4 6.29333333-59.52 17.38666667-86.72 1.81333333-2.45333333 2.98666667-5.33333333 3.52-8.42666667C279.04 341.97333333 384 274.77333333 506.66666667 274.77333333c160.74666667 0 291.52 115.30666667 291.52 257.06666667 0 10.88 8.85333333 19.73333333 19.73333333 19.73333333s19.73333333-8.85333333 19.73333334-19.73333333c0-34.02666667-6.72-66.66666667-18.66666667-97.17333333 27.30666667-181.86666667-33.17333333-267.73333333-35.73333333-271.25333334-5.01333333-6.93333333-13.97333333-9.81333333-22.18666667-7.04-39.78666667 13.22666667-122.02666667 89.17333333-131.30666667 97.70666667-0.74666667 0.64-1.06666667 1.49333333-1.6 2.24-37.65333333-13.33333333-78.50666667-20.90666667-121.49333333-20.90666667-42.02666667 0-82.13333333 7.36-119.14666667 20.16-0.42666667-0.42666667-0.64-1.06666667-1.06666666-1.49333333-9.28-8.64-91.52-84.48-131.30666667-97.70666667-8.21333333-2.77333333-17.06666667 0.10666667-22.18666667 7.04-2.56 3.52-61.76 87.78666667-36.37333333 266.02666667-13.22666667 32-20.8 66.45333333-20.8 102.50666667 0 10.77333333 8.74666667 19.62666667 19.62666667 19.62666666z m563.73333333-350.82666666c11.62666667 24.53333333 31.25333333 81.28 26.34666667 172.16-29.54666667-41.38666667-69.97333333-75.84-117.97333334-99.94666667 27.62666667-24.85333333 66.45333333-57.17333333 91.62666667-72.21333333z m-502.08 0c24.96 14.82666667 62.93333333 46.50666667 90.56 71.25333333-47.25333333 23.36-87.46666667 56.74666667-117.12 96.96-4.16-88.64 15.14666667-144.21333333 26.56-168.21333333zM288 583.89333333c-1.06666667-10.77333333-10.45333333-18.98666667-21.44-17.70666666l-154.98666666 14.72c-10.77333333 1.06666667-18.77333333 10.66666667-17.70666667 21.44 0.96 10.24 9.49333333 17.81333333 19.52 17.81333333 0.64 0 1.28 0 1.92-0.10666667l154.98666667-14.72c10.77333333-1.06666667 18.66666667-10.66666667 17.70666666-21.44zM309.65333334 642.34666667c-4.05333333-10.02666667-15.57333333-14.93333333-25.6-10.77333334l-151.04 61.54666667c-10.02666667 4.05333333-14.93333333 15.57333333-10.77333334 25.6 3.09333333 7.68 10.45333333 12.26666667 18.24 12.26666667 2.45333333 0 5.01333333-0.42666667 7.46666667-1.49333334l151.04-61.54666666c9.92-4.05333333 14.72-15.57333333 10.66666667-25.6zM908.8 580.90666667l-154.98666666-14.72c-10.98666667-1.28-20.48 6.93333333-21.44 17.70666666-1.06666667 10.77333333 6.93333333 20.48 17.70666666 21.44l154.98666667 14.72c0.64 0.10666667 1.28 0.10666667 1.92 0.10666667 10.02666667 0 18.56-7.68 19.52-17.81333333 1.06666667-10.77333333-6.82666667-20.37333333-17.70666667-21.44zM887.25333334 693.01333333L736.32 631.46666667c-10.02666667-4.16-21.54666667 0.64-25.6 10.77333333-4.16 10.02666667 0.74666667 21.54666667 10.77333334 25.6L872.53333334 729.38666667c2.45333333 0.96 4.90666667 1.49333333 7.46666666 1.49333333 7.78666667 0 15.14666667-4.58666667 18.24-12.26666667 3.94666667-10.02666667-0.85333333-21.54666667-10.98666666-25.6z" fill="#f2125e" p-id="11648"></path><path d="M446.08 459.2c0-20.58666667-17.92-37.33333333-40.10666666-37.33333333-22.08 0-40.10666667 16.64-40.10666667 37.33333333 0 20.58666667 17.92 37.33333333 40.10666667 37.33333333s40.10666667-16.74666667 40.10666666-37.33333333zM658.13333334 459.2c0-20.58666667-17.92-37.33333333-40.10666667-37.33333333-22.08 0-40.10666667 16.64-40.10666667 37.33333333 0 20.58666667 17.92 37.33333333 40.10666667 37.33333333s40.10666667-16.74666667 40.10666667-37.33333333zM461.97333334 686.08c20.37333333 0 36.8-13.76 47.89333333-31.25333333 10.98666667 17.38666667 27.41333333 31.25333333 47.78666667 31.25333333 34.45333333 0 62.61333333-27.41333333 62.61333333-61.22666667 0-8.10666667-6.61333333-14.72-14.72-14.72-8.10666667 0-14.72 6.61333333-14.72 14.72 0 17.49333333-14.82666667 31.68-33.06666667 31.68-16 0-33.06666667-28.16-33.06666666-47.89333333 0-8.10666667-6.61333333-14.72-14.72-14.72-8.10666667 0-14.72 6.61333333-14.72 14.72 0 19.84-17.06666667 47.89333333-33.06666667 47.89333333-18.24 0-33.06666667-14.18666667-33.06666667-31.68 0-8.10666667-6.61333333-14.72-14.72-14.72s-14.72 6.61333333-14.72 14.72c-0.32 33.81333333 27.73333333 61.22666667 62.29333334 61.22666667z" fill="#f2125e" p-id="11649"></path></svg>
                </div>
                <h2>贵州——猫咪</h2>
                <span>室有相乳猫，庭有同心兰。</span>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card shadow="always" class="rowCard">
                <div class="thisSvg">
                  <svg t="1678075639421" class="icon" viewBox="0 0 1496 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14986" width="48" height="48"><path d="M934.005093 596.225667a16.262677 16.262677 0 0 1-12.197008-5.494147 187.789965 187.789965 0 0 0-109.223654-59.55656 14.724316 14.724316 0 0 1-5.604031-1.86801 507.109824 507.109824 0 0 0-122.739257-50.546158 16.37256 16.37256 0 1 1 8.021455-31.646291 534.14103 534.14103 0 0 1 128.01364 52.194403 219.765904 219.765904 0 0 1 125.81598 69.446025 16.482443 16.482443 0 0 1-12.087125 27.470738zM1396.282673 549.41553c-3.516254-2.087776-7.142392-3.845903-10.988296-5.604031a150.869293 150.869293 0 0 0-63.951878-14.174901 155.044845 155.044845 0 0 0-38.459033 4.944733c-3.845903 0.988947-7.581924 2.197659-11.867359 3.736021a59.117028 59.117028 0 0 0-8.460987 104.169038c3.186606 1.758127 6.373211 3.516254 9.6697 5.054616a150.869293 150.869293 0 0 0 64.721058 14.394667 148.781517 148.781517 0 0 0 39.997395-5.384265c2.747074-0.659298 5.384265-1.538361 8.351104-2.527308a59.226911 59.226911 0 0 0 10.988296-104.388804z m-23.954484 79.884906a67.687899 67.687899 0 0 1-7.362158 2.856957 90.104021 90.104021 0 0 1-29.998046 5.054616 91.642382 91.642382 0 0 1-54.282178-17.691156l-6.153445-4.83485a15.27373 15.27373 0 0 1-3.076723-9.230168 14.834199 14.834199 0 0 1 6.483094-12.087124 64.830942 64.830942 0 0 1 6.922626-2.747074 90.43367 90.43367 0 0 1 30.217812-5.054616 91.312733 91.312733 0 0 1 54.941476 17.910921c1.86801 1.428478 3.73602 2.856957 5.604031 4.505201a14.944081 14.944081 0 0 1-2.96684 21.976591zM212.623512 352.50528h-0.659297a80.544204 80.544204 0 0 0-8.131339-2.087777 151.968123 151.968123 0 0 0-32.964885-3.626137 153.836133 153.836133 0 0 0-84.829639 25.492845l-5.054616 3.406371h-0.659298a42.41482 42.41482 0 0 0 10.988295 72.083217h0.879064c3.186606 0.879064 6.373211 1.648244 9.6697 2.307542a157.682036 157.682036 0 0 0 54.282178 1.538361 8.351104 8.351104 0 0 0 6.592977-5.274381 8.680753 8.680753 0 0 0 8.241222 2.307542 149.660581 149.660581 0 0 0 44.942127-19.3394c3.076723-1.977893 6.153445-4.065669 9.120285-6.263328l0.769181-0.659298a42.41482 42.41482 0 0 0-14.174901-70.434972z m-45.491542 80.434321a8.351104 8.351104 0 0 0-5.60403 5.054615 8.351104 8.351104 0 0 0-6.153446-2.637191H153.836133a93.290626 93.290626 0 0 1-31.316641-1.208712l-4.944733-1.208712a15.27373 15.27373 0 0 1-4.065669-25.602728l2.856956-1.977893a94.279573 94.279573 0 0 1 72.1931-13.405721l4.175552 1.09883a15.163847 15.163847 0 0 1 9.6697 14.174901A15.603379 15.603379 0 0 1 197.789314 417.555987l-5.384265 3.736021a93.840041 93.840041 0 0 1-25.273079 11.647593z" p-id="14987" fill="#f2125e"></path><path d="M1494.408149 604.906421v-0.769181c-0.879064-3.516254-1.86801-6.922626-2.96684-10.988295a181.196988 181.196988 0 0 0-234.380337-116.146281 10.988295 10.988295 0 0 0-2.307542 0.988947 34.173598 34.173598 0 0 1-6.153445 2.417425 40.986341 40.986341 0 0 1-38.34915-8.351105 43.953181 43.953181 0 0 1-9.6697-12.856305l-0.988947-1.977893a576.226201 576.226201 0 0 0-67.797781-89.554606 582.379646 582.379646 0 0 0-47.469435-45.711308 20.987644 20.987644 0 0 0-26.262026-0.879064 533.811381 533.811381 0 0 0-56.260072 47.799084 549.414761 549.414761 0 0 0-60.32574 69.555909c-10.988295 14.944081-20.987644 30.327695-29.998046 45.711308-3.845903 6.592977-7.581924 13.185954-10.988295 19.888815l-6.153446 8.900519a222.073446 222.073446 0 0 0-68.017547-23.954484c-10.219115-5.713914-20.657995-10.988295-31.206758-16.262677a182.405701 182.405701 0 0 1 56.919369-54.172295c5.274382-2.637191 10.988295-5.494148 15.713262-8.460988a537.657285 537.657285 0 0 0 65.050708-43.074117c6.153445-4.615084 12.197008-9.449934 18.020804-14.394666A552.271717 552.271717 0 0 0 1008.285969 296.68474a20.657995 20.657995 0 0 0 5.164498-17.251624 21.97659 21.97659 0 0 0-10.109231-15.713262 572.380298 572.380298 0 0 0-667.7587 61.314688l-1.648245 1.648244-3.076722 2.96684a25.382962 25.382962 0 0 1-2.527308 1.977893 39.228214 39.228214 0 0 1-23.295186 7.911572h-1.318595a39.008448 39.008448 0 0 1-22.965537-7.691806 43.953181 43.953181 0 0 1-4.175553-3.516255l-1.86801-0.988946A180.977222 180.977222 0 0 0 23.514952 351.626216 169.549395 169.549395 0 0 0 10.988295 369.537137a9.449934 9.449934 0 0 0-1.098829 1.758127 82.522097 82.522097 0 0 0 10.988295 92.851095l1.318595 1.318595a170.09881 170.09881 0 0 0 15.163848 12.966189l0.76918 0.549414a181.526637 181.526637 0 0 0 184.60336 18.460336l1.318595-0.659297a26.81144 26.81144 0 0 1 3.076723-1.538362 40.327043 40.327043 0 0 1 14.614433-3.296488h1.648244a40.21716 40.21716 0 0 1 40.107277 38.129384v11.098178a437.993447 437.993447 0 0 0 120.871248 287.673569 368.547421 368.547421 0 0 0 667.538934-37.030555 434.696959 434.696959 0 0 0 61.314687-109.003888 9.6697 9.6697 0 0 0 0-1.648245 30.217812 30.217812 0 0 1 1.86801-4.944732 40.107278 40.107278 0 0 1 28.459685-22.855655 40.656692 40.656692 0 0 1 36.371257 10.988296 43.953181 43.953181 0 0 1 5.384265 6.592977 20.218463 20.218463 0 0 0 1.86801 2.417425 175.812723 175.812723 0 0 0 39.777629 32.964885A180.977222 180.977222 0 0 0 1469.904251 681.275072l0.76918-0.76918 5.823797-6.043563a82.63198 82.63198 0 0 0 19.778931-53.62288 78.676194 78.676194 0 0 0-1.86801-15.933028z m-49.88686 41.755521l-3.845904 4.06567-0.659297 0.659297a138.672286 138.672286 0 0 1-200.206739-5.384264 76.918066 76.918066 0 0 0-10.109232-12.087125 81.862799 81.862799 0 0 0-57.798433-23.624835 78.016896 78.016896 0 0 0-16.812091 1.758127 82.63198 82.63198 0 0 0-58.018199 47.24967 67.468133 67.468133 0 0 0-3.626137 9.6697 399.75418 399.75418 0 0 1-332.286048 251.522077c-3.845903 0-7.691807 0.769181-11.647593 0.988947h-53.183348c-4.615084 0-9.230168 0-13.845252-0.988947l-7.032509-0.879064c-4.285435 0-8.57087-0.988947-12.746423-1.648244l-6.592977-1.098829c-4.395318-0.769181-8.790636-1.428478-13.076071-2.307542l-5.494148-1.208713-14.065018-3.296488-3.845903-1.09883c-5.164499-1.318595-10.988295-2.747074-15.603379-4.395318h-1.758127a395.578628 395.578628 0 0 1-166.912205-104.60857l-15.053964-15.823145a396.347808 396.347808 0 0 1-94.499339-243.940154v-7.581924-3.73602a82.302331 82.302331 0 0 0-82.302331-78.236662h-3.626138a82.302331 82.302331 0 0 0-29.448631 6.812743l-5.494147 2.637191a138.892051 138.892051 0 0 1-141.968774-15.273731c-3.73602-2.856957-7.362158-5.933679-10.988296-9.120285a39.997395 39.997395 0 0 1-5.384264-43.953181 128.892703 128.892703 0 0 1 9.449934-12.526656 138.782169 138.782169 0 0 1 192.185283-19.449283 89.115074 89.115074 0 0 0 7.581924 6.373212 82.522097 82.522097 0 0 0 47.029903 16.042911h1.86801a82.082565 82.082565 0 0 0 48.788031-15.933028c1.86801-1.428478 3.73602-2.856957 5.274382-4.285436s3.845903-3.516254 5.60403-5.384264a530.075361 530.075361 0 0 1 594.576654-69.006494c-10.988295 10.988295-22.965537 21.97659-35.052662 32.415471l-16.592325 13.295837a517.548704 517.548704 0 0 1-59.55656 39.44798h-0.769181c-4.944733 2.856957-10.109232 5.604031-15.163847 8.241221l-1.318596 0.769181A224.600754 224.600754 0 0 0 745.665713 472.497463a21.317293 21.317293 0 0 0 10.988295 29.0091A484.034404 484.034404 0 0 1 807.969347 527.438939a24.723664 24.723664 0 0 0 7.252275 2.527308 179.878393 179.878393 0 0 1 71.753568 28.020153 21.20741 21.20741 0 0 0 27.470738-3.516254 243.06109 243.06109 0 0 0 21.97659-28.569568l0.769181-1.428478c3.406372-6.373211 6.922626-12.746422 10.988295-19.009751 8.351104-14.284784 17.691155-28.459685 27.690504-42.195054a508.098771 508.098771 0 0 1 55.710657-64.281527c12.087125-11.757476 24.94343-23.07542 38.34915-33.734066 10.988295 9.889466 21.317293 20.328346 31.316641 30.986993a529.855595 529.855595 0 0 1 62.633283 82.522097 76.918066 76.918066 0 0 0 7.472041 12.197007 82.082565 82.082565 0 0 0 65.929771 33.734067 83.73081 83.73081 0 0 0 23.954483-3.516255 75.489588 75.489588 0 0 0 11.647593-4.615084 139.111817 139.111817 0 0 1 178.669681 89.664489c0.769181 2.417425 1.428478 4.83485 1.977893 7.362158a39.557863 39.557863 0 0 1 0.76918 7.252275 40.107278 40.107278 0 0 1-9.559817 25.822493z" p-id="14988" fill="#f2125e"></path><path d="M1093.665022 630.069617a216.359533 216.359533 0 0 0-27.250972-285.695676l-4.724967-4.065669a16.37256 16.37256 0 0 0-20.657995 0c-11.757476 9.6697-23.185303 19.888814-34.063715 30.437578a541.393305 541.393305 0 0 0-58.897262 68.017547A529.196297 529.196297 0 0 0 918.731363 483.485759c-3.845903 6.373211-7.472041 12.966188-10.988296 19.559165-2.637191 4.175552-5.604031 8.351104-8.680753 12.416774a213.832225 213.832225 0 0 0-69.99544-25.163196c-11.647593-6.70286-23.624835-12.856305-35.821843-18.570219a183.834179 183.834179 0 0 1 60.545507-59.336795c5.164499-2.637191 10.43888-5.494148 15.493496-8.351104a522.383554 522.383554 0 0 0 63.62223-42.085171 521.83414 521.83414 0 0 0 55.600773-49.227562 16.262677 16.262677 0 0 0-3.406371-25.382962 534.250913 534.250913 0 0 0-267.345223-71.643685A527.43817 527.43817 0 0 0 494.473285 263.719854c-14.174901 6.483094-28.020153 13.625486-41.31599 21.20741l-1.208713 0.659298a258.005172 258.005172 0 0 0 4.83485 437.444032h0.879064c10.328997 5.713914 20.987644 10.988295 31.756173 16.262677A528.317234 528.317234 0 0 0 717.755443 791.158024a534.910211 534.910211 0 0 0 334.483707-118.234056h0.659297l7.472041-6.263328a217.897894 217.897894 0 0 0 32.415471-35.162545z m-64.611175-236.907645c6.812743-6.592977 13.955135-13.185954 21.207409-19.559166a184.60336 184.60336 0 0 1 52.743817 128.892703 182.735349 182.735349 0 0 1-20.10858 83.401161 392.831554 392.831554 0 0 0-96.257466-128.123522 16.042911 16.042911 0 0 0-10.988295-3.845904 505.46158 505.46158 0 0 1 53.403115-60.765272z m10.988295 248.115706l-6.592977 5.494147a2.96684 2.96684 0 0 0-0.879064 0.769181A503.373804 503.373804 0 0 1 717.755443 758.193139a496.561061 496.561061 0 0 1-214.271756-48.01885c-10.219115-4.83485-20.328346-9.999349-29.998046-15.383614a227.018179 227.018179 0 0 1-74.610525-74.500641 358.108541 358.108541 0 0 1 230.7542-211.744449 16.152794 16.152794 0 0 0-9.120285-31.096875A390.194363 390.194363 0 0 0 380.304897 582.380415a225.479818 225.479818 0 0 1 88.785426-269.432998c12.526657-7.252275 25.712611-14.065018 39.118331-20.218463a502.824389 502.824389 0 0 1 441.83935 10.988295c-6.70286 6.153445-13.515603 12.197008-20.438229 18.020804s-10.988295 9.010402-16.482443 13.295837a497.989539 497.989539 0 0 1-59.226911 39.228214h-0.659298c-5.054616 2.856957-10.109232 5.604031-15.27373 8.241222h-0.988947a217.128713 217.128713 0 0 0-81.643033 87.906361 16.37256 16.37256 0 0 0-0.769181 13.076072 16.262677 16.262677 0 0 0 8.790636 9.449933 513.592918 513.592918 0 0 1 51.644988 25.712611 15.713262 15.713262 0 0 0 5.494147 1.977893 181.746403 181.746403 0 0 1 72.522749 28.789334 16.262677 16.262677 0 0 0 21.097527-2.747074 215.590352 215.590352 0 0 0 20.767878-27.580621l0.659297-1.09883c3.406372-6.373211 6.812743-12.636539 10.988296-18.899867s9.449934-15.603379 14.284783-23.514952a14.834199 14.834199 0 0 0 4.505201 6.592977 359.317253 359.317253 0 0 1 96.477232 136.254861 173.615064 173.615064 0 0 1-22.086473 22.855654z" p-id="14989" fill="#f2125e"></path><path d="M1290.025858 0.000769a81.203502 81.203502 0 0 0-29.009099 5.274382h-1.208713l-7.142392 3.845903a575.127371 575.127371 0 0 0-53.952529 28.679451 551.392654 551.392654 0 0 0-167.571502 156.912855l-0.769181 1.318596c-4.83485 8.021456-10.219115 16.152794-15.933028 24.503898a513.153386 513.153386 0 0 1-90.763318 99.444072l-16.592326 13.295837a517.548704 517.548704 0 0 1-59.55656 39.44798h-0.769181c-4.944733 2.856957-10.109232 5.604031-15.163847 8.241221l-1.318596 0.769181a224.600754 224.600754 0 0 0-84.609873 90.763318 21.317293 21.317293 0 0 0 10.988295 29.0091A484.034404 484.034404 0 0 1 807.969347 527.438939a24.723664 24.723664 0 0 0 7.252275 2.527308 179.878393 179.878393 0 0 1 71.753568 28.020153 20.657995 20.657995 0 0 0 11.647592 3.516255 20.987644 20.987644 0 0 0 15.823146-7.032509 243.06109 243.06109 0 0 0 21.97659-28.569568l0.769181-1.428478c3.406372-6.373211 6.922626-12.746422 10.988295-19.009751 8.351104-14.284784 17.691155-28.459685 27.690504-42.195054a505.46158 505.46158 0 0 1 171.527288-148.781517l13.076071-6.70286a551.172888 551.172888 0 0 0 196.910251-176.691787 4.724967 4.724967 0 0 1 0-0.769181l3.845903-5.823796A82.412214 82.412214 0 0 0 1290.025858 0.000769z m35.052662 102.191146l-2.96684 4.615084a506.120877 506.120877 0 0 1-181.306871 162.956418c-4.505201 2.307542-9.120285 4.615084-13.515603 7.032509A548.425814 548.425814 0 0 0 941.037602 438.433748c-10.988295 14.944081-20.987644 30.327695-29.998046 45.711308-3.845903 6.592977-7.581924 13.185954-10.988295 19.888815l-6.153445 8.900519a222.073446 222.073446 0 0 0-68.017548-23.954484c-10.219115-5.713914-20.657995-10.988295-31.206758-16.262677a181.196988 181.196988 0 0 1 56.919369-54.172295c5.274382-2.637191 10.988295-5.494148 15.713262-8.460988a537.657285 537.657285 0 0 0 65.050708-43.074117c6.153445-4.615084 12.197008-9.449934 18.020804-14.394666a554.908908 554.908908 0 0 0 98.894657-107.685294c6.153445-8.900519 11.867359-17.801038 17.14174-26.371908a508.318537 508.318537 0 0 1 135.375797-131.859543 181.196988 181.196988 0 0 0 59.886209 61.534454 20.987644 20.987644 0 0 0 10.988295 3.186605 21.097527 21.097527 0 0 0 10.988296-39.008448 139.551349 139.551349 0 0 1-46.260723-47.799084c10.988295-5.823796 21.317293-10.988295 32.305588-16.37256l6.483094-2.856957a37.689853 37.689853 0 0 1 13.515603-2.417425 40.21716 40.21716 0 0 1 40.217161 40.217161 38.678799 38.678799 0 0 1-4.83485 19.009751z" p-id="14990" fill="#f2125e"></path></svg>
                </div>
                <h2>东北——私房菜</h2>
                <span>蓼茸蒿笋试春盘,人间有味是清欢。</span>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 第二排图表 热搜-->
      <div class="secondRow">
        <div class="hot">
            <div class="card-body">
              <div class="d-flex flex-wrap justify-content-between">
                <h4 class="hot_title">今日热门</h4>
              </div>
              <div class="hotlist">
                <el-table :data="hotData" stripe style="width: 100%">
                  <el-table-column prop="id" label="序号" width="80px">
                  </el-table-column>
                  <el-table-column prop="hot_name" label="热搜名" width="width">
                  </el-table-column>
                  <el-table-column prop="hot_num" label="热度" width="100px">
                  </el-table-column>
                </el-table>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="55"
                  class="pagination"
                  @current-change="handlerCurrentChange"
                >
                </el-pagination>
              </div>
            </div>
        </div>
        <div class="numRight">
          <!-- 这里写统计图标题 -->
          <div class="hotNumPicTitle">
                <h4 class="pic_title">今日热搜热度统计图</h4>
          </div>
          <!-- 热度折线统计图 -->
          <div ref="topRight" class="topRight"></div>
        </div>
      </div>
      <!-- 第三排图表 一个大图 -->
      <div class="rowchart">
        <div class="inchart" ref="sortchart"></div>
      </div>
    </div>
    <!-- 底部 联系我们 -->
    <footer class="footer">
      <div class="d-sm-flex justify-content-center justify-content-sm-between">
        <span class="text-center text-sm-left d-block d-sm-inline-block">
          联系我们 : 河南省开封市龙亭区河南大学
        </span>
      </div>
    </footer>
  </div>
</template>

<script>
import Charts from "@/components/Charts/index.vue";
import mapChart from "@/components/Charts/mapChart";
export default {
  name: "First",
  data() {
    return {
      pageNum: 1, //当前第几页
      pageSize: 6, //一页显示几条数据
      hotData: [], //分页热搜数据
      allHotData: [], //全部热搜表
      timeData: [], //实时热搜表
      timeNameData:[],  //实时热搜名
      timeNumData:[],   //实时热搜热度
      hot_numCount: [], //热度统计表
      data: [],
      sortchart: {},
      user_name:this.$store.state.user_name,
    };
  },
  // 注册组件
  components: {
    Charts,
    mapChart,
  },
  mounted() {
    this.getHotData();
    this.getAllHotData();
    this.getTimeData(); //实时数据
  },
  methods: {
    async getHotData() {
      let { pageNum, pageSize } = this;
      let result = await this.$API.reqHotList(pageNum, pageSize);
      // console.log(result);
      if (result.code == 200) {
        this.hotData = result.result.list;
        // console.log(this.hotData);
      }
    },
    async getAllHotData() {
      let result = await this.$API.reqHotList(1, 60);
      if (result.code == 200) {
        this.allHotData = result.result.list;
        // console.log(this.allHotData);
        // 把数据分成不同的阶段
        const count = [0, 0, 0, 0, 0, 0];
        for (let i in this.allHotData) {
          switch (true) {
            case this.allHotData[i].hot_num < 200000:
              count[0]++;
              break;
            case this.allHotData[i].hot_num < 300000:
              count[1]++;
              break;
            case this.allHotData[i].hot_num < 400000:
              count[2]++;
              break;
            case this.allHotData[i].hot_num < 500000:
              count[3]++;
              break;
            case this.allHotData[i].hot_num < 1000000:
              count[4]++;
              break;
            default:
              count[5]++;
          }
        }
        this.hot_numCount = count;
        // console.log(this.hot_numCount);
      }
    },
    async getTimeData() {
      //获取热搜实时数据
      let result = await this.$API.reqTimeHotList();
      // console.log(result);
      if (result.code == 200) {
        this.timeData = result.result.list;
        // 热搜名取出来
        for(let i = 0;i<5;i++){
          this.timeNameData.push(this.timeData[i].hot_name);
        }
      }
    },
    handlerCurrentChange(page) {
      this.pageNum = page;
      this.getHotData();
    },
    initTopRightChart() {
      const num = this.hot_numCount;
      // console.log(num);
      const charts = this.$echarts.init(this.$refs.topRight);
      const option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "10~20万",
            "20~30万",
            "30~40万",
            "40~50万",
            "50~100万",
            "100万以上",
          ],
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"],
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 2,
              // rgba(0, 0, 180, 0.4)
              color: "#fcd0df",
            },
            {
              gt: 3,
              lt: 4,
              color: "#fcd0df",
            },
          ],
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "#f2125e",
              width: 5,
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }],
            },
            areaStyle: {},
            data: this.hot_numCount,
          },
        ],
      };
      option && charts.setOption(option);
    },
    initSortChart() {
      this.sortchart = this.$echarts.init(this.$refs.sortchart);
      var colors = ["#B0C4DE", "#f989af", "#6a7685", "#cecef6", "#a5a5c5"];
      const option = {
        title: {
          text: "微博热搜动态排序",
          color: "#1b1b29", //'red'，字体颜色
        },
        xAxis: {
          //x轴配置项
          max: "dataMax", //用数据的最大值作为x轴最大值
          // data: this.timeNumData,    //热搜热度值
        },
        yAxis: {
          //y轴配置项
          type: "category",
          data: this.timeNameData,    //热搜名
          inverse: true, //y从下往上是从小到大的顺序
          animationDuration: 300, //第一次柱条排序动画时长
          animationDurationUpdate: 100, //第一次后柱条排序动画时长
          // max: 2, //只显示前n名 就设置为n-1 否则显示所有柱条
        },
        series: [
          {
            realtimeSort: true, //开启该系列动态排序效果
            type: "bar",
            barWidth: 30, //设置柱子粗细
            itemStyle: {
              color: function (params) {
                return colors[params.dataIndex];
              },
            },
            data: this.timeNumData,
            label: {
              show: true,
              position: "right",
              valueAnimation: true, //实时改变标签
            },
          },
        ],
        animationDuration: 0,
        animationDurationUpdate: 2000, //每次更新动画时长
        animationEasing: "linear",
        animationEasingUpdate: "linear",
        legend: {
          show: true,
        },
      };
      setTimeout(() => {
        //显示图表
        this.sortchart.setOption(option);
      }, 10);
    },
    //更新数据
    runData(cur) {
      //判断现在是第几次操作
      const num = Math.floor(this.timeData.length/52)-1;    //能再进行几次操作
      cur++;
      var option = this.sortchart.getOption();
      // console.log(cur);
      if(cur<=num){
        for(let i = 0;i<this.timeNameData.length;i++){
          option.yAxis[0].data[i] = this.timeData[52*cur+i].hot_name;
          option.series[0].data[i] = this.timeData[52*cur+i].hot_num;
        }
      }else{
        cur = 0;
      }
      //cur超出时做循环操作
      this.sortchart.setOption(option);
      return cur;
    },
  },
  watch: {
    timeData: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          for (let i = 0; i < 5; ++i) {
            // this.data.push(Math.round(Math.random() * 200));
            this.timeNumData.push(this.timeData[i].hot_num);
          }
          //创建图表
          this.initSortChart();
          let cur = 0;
          //3秒定时更新
          setInterval(() => {
            cur = this.runData(cur);
          }, 2000);
        });
      },
    },
    hot_numCount: {
      // 注意这里使用nextTick() 在numcount数据回来之后再执行画图操作
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          this.initTopRightChart();
        });
      },
    },
  },
};
</script>

<style >
.col-sm-6 {
  /* float: left; */
}
/* 地图 */
.row .left {
  width: 655px;
  height: 650px;
}
.mediumRight {
  /* 撑起右边所有 */
  flex: 1;
  /* background-color: white; */
  /* background-color: #3d5575; */
  margin: 0px 10px 30px;
}

.secondRow{
  display: flex;
  height:450px;
}
/* 热搜 */
.hot{
  width: 550px;
  height:450px;
  background-color: white;
}
.rightTitle{
  color: #1b1b29;
}
.numRight {
  flex: 1;
  height: 450px;
  margin-left: 20px;
  background-color: white;
}
/* 热搜折线统计图 */
.topRight{
  height: 400px;
  width: 100%;
}
.hot_title {
  font-weight: 700 !important;
  /* 块级元素水平居中 */
  margin: 0 auto;
}
.hotNumPicTitle{
  margin-top: 20px ;
  /* margin-bottom: 20px; */
  display: flex !important;

}
.pic_title{
  font-weight: 700 !important;
  /* 块级元素水平居中 */
  margin: 0 auto;
  text-align:center,
}

.hotlist .pagination {
  margin-top: 20px;
}
/* 修改elementUI分页器默认样式 */
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f2125e !important;
}
/* 未选中的选项鼠标hover样式 */
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #f2125e !important;
  background-color: #fff !important;
}
/* 选中选项鼠标放上去的背景色 */
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #f2125e !important;
  color: #fff !important;
}
.el-pagination{
  /* 设置分页器居中显示 */
  margin-left: 80px;
  /* text-align: center; 
  margin-top:13px; */
}
/* 修改elementUI table组件样式 */
.el-table {
  color: #1b1b29 !important;
}
.el-table thead {
  color: #1b1b29 !important;
}
.rowchart {
  width: 100%;
  height: 300px;
  margin-top: 40px;
  background-color: white;
}
.inchart {
  width: 100%;
  height: 320px;
  padding: 20px 20px 0px;
}
.rowCard{
  /* background-color: rgb(176, 193, 190); */
  border-radius: 4px;
  min-height: 150px;
  min-width: 100px;
  margin: 20px 10px 15px;
}
.rowCard .thisSvg{
  width:100%;
  /* 设置图标居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rowCard h2{
  text-align: center;
  margin-top: 10px;
  color: #1b1b29;
  font-weight: bold;
}
.rowCard span{
  text-align: center;
  margin-top: 10px;
  color: #1b1b29;
}
</style>